import React from "react";
import {View, Image, TouchableWithoutFeedback, Text} from "react-native";

export default class RadioBox extends React.Component {

    constructor(props) {
        super(props);

        // this.state = {
        //     checked: this.props.checked
        // }
    }

    _onClick() {
        if(this.props.onClick){
            this.props.onClick();
        }
    }

    _normalView() {
        if (this.props.normalImage) {
            return (
                <Image style={style.image} source={this.props.normalImage}/>
            )
        } else {
            return (
                <View style={[style.normal,this.props.normalStyle]}/>
            )
        }

    }

    _checkedView() {
        if (this.props.checkImage) {
            return (
                <Image style={style.image} source={this.props.checkImage}/>
            )
        } else {
            return (
                <View style={[style.checked,this.props.checkedStyle]}/>
            )
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={() => this._onClick()}>
                <View style={[{flexDirection: 'row', alignItems: "center",padding:5,}, this.props.style]}>
                    {
                        this.props.checked ? this._checkedView() : this._normalView()
                    }
                    <Text style={style.text}>{this.props.name}</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

const size = 17;
const radius = size / 2;

const style = {
    image: {
        width: size,
        height: size,
    },
    normal: {
        width: size,
        height: size,
        borderRadius: radius,
        borderWidth: 1,
        borderColor:"lightgray"
    },
    checked: {
        width: size,
        height: size,
        borderRadius: radius,
        borderWidth: 1,
        borderColor:'lightgray',
        backgroundColor: '#ff800e'
    },
    text:{
        marginLeft:10,
        fontSize: 16,
        color: "#000000",
    }
};



